<template>
  <!-- 顶部导航栏 - 固定在页面顶部 -->
  <header class="header">
    <!-- 导航栏容器 - 限制最大宽度并居中 -->
    <div class="header-container">
      <!-- Logo区域 - 包含小红书Logo -->
      <div class="logo" @click="handleLogoClick">
        <!-- 小红书Logo文字标识 -->
        <div class="logo-text">小红书</div>
      </div>
      
      <!-- 搜索框区域 - 占据中间位置 -->
      <div class="search-container">
        <div class="search-box">
          <!-- 搜索图标 -->
          <svg class="search-icon" viewBox="0 0 24 24" width="20" height="20">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
          </svg>
          <!-- 搜索输入框 - 绑定到searchQuery响应式数据 -->
          <input 
            type="text" 
            placeholder="登录探索更多内容 " 
            class="search-input"
            v-model="searchQuery"
          />
        </div>
      </div>
      
      <!-- 右侧操作区域 -->
      <div class="right-actions">
        <!-- 发布按钮 -->
        <button class="publish-btn" @click="handlePublishClick">
          <svg class="publish-icon" viewBox="0 0 24 24" width="24" height="24">
            <path fill="currentColor" d="M11 9h2V7h-2v2zm0 4h2v-2h-2v2zm0 4h2v-2h-2v2zm-7-2V9.5C4 6.46 6.46 4 9.5 4S15 6.46 15 9.5V11c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V9.5c0-2.21 1.79-4 4-4S14 7.29 14 9.5V11c0 .55-.45 1-1 1H8c-.55 0-1-.45-1-1z"/>
          </svg>
          <span class="publish-text">发布</span>
        </button>
        
        <!-- 消息通知图标 -->
        <div class="notification-icon" @click="handleNotificationClick">
          <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
            <path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
          </svg>
        </div>
        
        <!-- 用户头像 -->
        <div class="user-avatar" @click="handleAvatarClick">
          <svg class="avatar-icon" viewBox="0 0 24 24" width="32" height="32">
            <circle cx="12" cy="8" r="4" fill="currentColor"/>
            <path fill="currentColor" d="M20 19v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6z"/>
          </svg>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 搜索查询响应式变量
const searchQuery = ref<string>('');

// Logo点击事件处理函数
const handleLogoClick = () => {
  // 可以在这里添加跳转首页或其他相关逻辑
  console.log('Logo clicked');
};

// 发布按钮点击事件处理函数
const handlePublishClick = () => {
  console.log('Publish button clicked');
};

// 消息通知图标点击事件处理函数
const handleNotificationClick = () => {
  console.log('Notification icon clicked');
};

// 用户头像点击事件处理函数
const handleAvatarClick = () => {
  console.log('User avatar clicked');
};
</script>

<style scoped>
/* 头部导航栏样式 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid #e8e8e8;
  z-index: 1000;
  height: 60px;
}

/* 头部容器样式 - 控制内容布局和最大宽度 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

/* Logo区域样式 */
.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

/* Logo文本样式 */
.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: #ff2442; /* 小红书品牌色 */
  cursor: pointer;
  transition: opacity 0.3s ease;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.logo-text:hover {
  opacity: 0.8;
}

/* 搜索框容器样式 */
.search-container {
  flex: 1;
  max-width: 600px;
  margin: 0 20px;
}

/* 搜索框整体样式 */
.search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.search-box:focus-within {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 搜索图标样式 */
.search-icon {
  margin-right: 8px;
  color: #999;
}

/* 搜索输入框样式 */
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #333;
}

/* 右侧操作区域样式 */
.right-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 发布按钮样式 */
.publish-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #ff2442; /* 小红书品牌色 */
  color: white;
  border: none;
  border-radius: 18px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.publish-btn:hover {
  background-color: #e02039;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 36, 66, 0.3);
}

/* 发布图标样式 */
.publish-icon {
  color: white;
}

/* 发布文字样式 */
.publish-text {
  font-size: 14px;
  font-weight: 500;
}

/* 通知图标样式 */
.notification-icon {
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.notification-icon:hover {
  background-color: #f5f5f5;
}

.icon {
  color: #333;
  transition: color 0.3s ease;
}

.notification-icon:hover .icon {
  color: #ff2442;
}

/* 用户头像样式 */
.user-avatar {
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.user-avatar:hover {
  background-color: #f5f5f5;
}

.avatar-icon {
  color: #333;
  transition: color 0.3s ease;
}

.user-avatar:hover .avatar-icon {
  color: #ff2442;
}
</style>